<template>
  <ComForm ref="implementationFormRef" :format="implementationForm" class="form"
    ><template #title8>
      <div class="title title">违法处置流程审批</div>
      <div class="item-title title">任务情况</div>
    </template>
    <template #title7>
      <div class="item-title title">违法情况</div>
      <div class="item-content">
        <div class="content-left">
          <div class="content-title">
            <el-button type="primary" class="updateBtn">更新</el-button>
          </div>
          <ComTable
            ref="tableRef"
            :column="leftcolumn"
            :where="where"
            :isIndex="true"
            :isPagination="false"
          ></ComTable>
        </div>
      </div>
      <div class="item-title title">任务审批</div>
      <div class="item-title-border">项目负责人审批(巡检单位)</div>
    </template>
    <template #title9>
      <div class="item-title-border">业主代表审批</div>
    </template>
    <template #title6>
      <div class="item-title title">案件处置情况</div>
    </template>
    <template #title1>
      <div class="item-title-border">负责人审核(施工单位)</div>
    </template>
    <template #title2>
      <div class="item-title-border">服务单位审核(巡检单位)</div>
    </template>
    <template #title3>
      <div class="item-title-border">监理单位审核</div>
    </template>
    <template #title4>
      <div class="item-title-border">跟踪审计审核</div>
    </template>
    <template #title5>
      <div class="item-title-border">业主单位审批</div>
    </template>
    <template #button>
      <div class="btns">
        <el-button type="primary">转交下一步</el-button>
        <el-button type="primary">返回上一步</el-button>
        <el-button type="primary">保存</el-button>
        <el-button>保存返回</el-button>
        <el-button>返回</el-button>
      </div>
    </template>
  </ComForm>
</template>
  <script lang="ts" setup name="fixForm">
import { ref } from "vue";

const implementationFormRef = ref(null);
const implementationForm = ref([
  {
    type: "slot",
    slotName: "title8",
    span: 24,
  },
  {
    label: "任务名称",
    prop: "postCode",
    type: "input",
    span: 8,
  },
  {
    label: "任务等级",
    prop: "status",
    type: "select",
    option: [
      { label: "肖家河流域", value: 0 },
      { label: "跳蹬河流域", value: 1 },
    ],
    span: 8,
  },
  {
    label: "任务描述",
    prop: "postCode",
    type: "input",
    span: 8,
  },
  {
    label: "工期",
    prop: "postCode",
    type: "input",
    span: 8,
  },
  {
    label: "区域",
    prop: "postCode",
    type: "input",
    span: 8,
  },
  {
    label: "备注",
    prop: "postCode",
    type: "input",
    span: 8,
  },

  {
    type: "slot",
    slotName: "title7",
    span: 24,
  },
  {
    label: "服务单位意见",
    prop: "postCode",
    type: "textarea",
    span: 24,
  },
  {
    label: "签名",
    prop: "postCode",
    type: "input",
    offset: 12,
    span: 6,
  },
  {
    label: "时间",
    prop: "time",
    type: "input",
    disabled: true,
    span: 6,
    defaultValue: new Date().toISOString().split("T")[0],
  },
  {
    type: "slot",
    slotName: "title9",
    span: 24,
  },
  {
    label: "审批意见",
    prop: "postCode",
    type: "textarea",
    span: 24,
  },
  {
    label: "执行部门",
    prop: "postCode",
    type: "input",
    span: 8,
  },
  {
    label: "执行人",
    prop: "postCode",
    type: "input",
    span: 8,
  },
  {
    label: "附件",
    prop: "postCode",
    type: "input",
    span: 8,
  },
  {
    label: "签名",
    prop: "postCode",
    type: "input",
    offset: 12,
    span: 6,
  },
  {
    label: "时间",
    prop: "time",
    type: "input",
    disabled: true,
    span: 6,
    defaultValue: new Date().toISOString().split("T")[0],
  },

  {
    type: "slot",
    slotName: "title6",
    span: 24,
  },

  {
    label: "跟踪案件处理情况",
    prop: "postCode",
    type: "textarea",
    span: 24,
  },
  {
    label: "附件",
    prop: "postCode",
    type: "input",
    span: 24,
  },
  {
    label: "是否销案",
    prop: "radio",
    type: "radio",
    option: [
      { label: "是", value: 0 },
      { label: "否", value: 1 },
    ],
    span: 24,
  },
  {
    label: "会签意见区",
    prop: "postCode",
    type: "textarea",
    span: 24,
  },
  {
    type: "slot",
    slotName: "button",
    span: 24,
  },
]);
//表格相关配置
const tableRef = ref();
let leftcolumn = ref([
  { label: "编号", prop: "postId" },
  { label: "部件名称", prop: "postCode" },
  { label: "巡检类型", prop: "postName" },
  { label: "缺陷情况", prop: "postSort" },
  { label: "附件", prop: "postId" },
  { label: "操作", prop: "postId" },
]);
let rightcolumn = ref([
  { label: "清淤描述", prop: "postId" },
  { label: "工作数量", prop: "postCode" },
  { label: "单位", prop: "postName" },
  { label: "附件", prop: "postSort" },
]);
const where = ref({});
</script>
  <style scoped>
.form {
  padding: 10px 0px;
}
.title {
  height: 40px;
  line-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 600;
}
.item-title {
  background-color: #4095e5;
  color: #fff;
}
.item-content {
  width: 100%;
}
.content-title {
  height: 40px;
  display: flex;
  font-size: 20px;
  font-weight: 600;
  justify-content: flex-end;
  align-items: center;
  border-right: 1px solid #d4d7de;
  border-bottom: 1px solid #d4d7de;
}
.content-title2 {
  height: 40px;
  display: flex;
  font-size: 20px;
  font-weight: 600;
  justify-content: center;
  align-items: center;
}
.tableContent {
  margin: auto;
}
.updateBtn {
  margin-right: 10px;
}
.item-title-border {
  height: 40px;
  display: flex;
  font-size: 18px;
  align-items: center;
  border-bottom: 1px solid #d4d7de;
}
.btns {
  margin-top: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
}
</style>